<template>
  <div>
    <el-button @click="getIpLocation">获取IP定位</el-button>
    <div id="map" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'IpLocation',
  methods: {
    /**
     * 获取IP定位
     */
    getIpLocation() {
      // 使用腾讯地图的IP定位服务
      const ipLocation = new qq.maps.IpLocationService();
      ipLocation.getIpLocation((result) => {
        if (result && result.status === 0) {
          const latLng = new qq.maps.LatLng(result.lat, result.lng);
          const map = new qq.maps.Map(document.getElementById('map'), {
            center: latLng,
            zoom: 13
          });
          const marker = new qq.maps.Marker({
            position: latLng,
            map: map
          });
        } else {
          this.$message.error('获取IP定位失败');
        }
      });
    }
  }
};
</script>